<template>
	<!-- 送礼物操作面板 -->
	<div class='gift-panel-wrap'>
		<swiper :options="swiperOption">
			<swiper-slide class='gift-line-wrap' v-for="(item,index) in giftBanner" :key="index">
				<div class="gift-item-wrap" v-for='(giftItem,index) in item' :key='giftItem.name' @click='selectGiftHandle(giftItem.id)' :style="{'border-color':giftItem.id === selectedGiftId ?'#FB5D00':'#ffffff'}">
					<div class="gift-item-icon">
						<img :src="giftItem.imageUrl+'?x-oss-process=image/resize,m_fixed,h_96,w_96'" alt="">
					</div>
					<div class='gift-item-txt'>{{giftItem.name}}</div>
				</div>
			</swiper-slide>
			<div v-if="giftBannerLength > 1" class="swiper-pagination" slot="pagination"></div>
		</swiper>
		<div class='gift-number-wrap'>
			<div class='gift-send-chance-amount'>
				<div>
					您还有<span style='color:gold;'>{{giftSendChanceAmount}}</span>个送礼机会
				</div>
			</div>
			<div class='amount-txt'>数量</div>
			<div class='amount-decrease-btn' @click='giftAmountDecrease' :style="{'background-color':giftAmount > 1 ?'#F7BA2A':'#f3f3f3'}">
				<div class='decrease-icon'></div>
			</div>
			<input id="zhibo_songli_shuliang" class='amount-num-input' type='number' v-model='giftAmount' placeholder="0" disabled />
			<div class='amount-increase-btn' @click='giftAmountIncrease' :style="{'background-color':giftAmount < 5 ?'#F7BA2A':'#f3f3f3'}">
				<div class='increase-row'></div>
				<div class='increase-column'></div>
			</div>
			<div class='send-btn-wrap' @click='sendGiftHandle' :style="{'background-color': giftAmount > 0?'#F7BA2A':'#f3f3f3'}">赠送</div>
		</div>
	</div>
</template>
<script>
	import webim from "../../util/imSdk";
	import baseIm from "../../util/imBase";
	import fun from "../../util/function";
	import msyhUnify from '@/assets/images/msyh/msyh-special.png'; //民生银行固定直播间 固定头像
	export default {
		props: {
			roomInfo: Object //房间信息
		},
		components: {},
		data() {
			return {
				selType: webim.SESSION_TYPE.GROUP, //聊天类型 群聊
				giftBanner: [], //送礼列表
				selectedGiftId: '', // 选中礼物的id
				enterRoomTime: this.$store.state.giftPanel.enterRoomTime, //进入直播间的开始计时时间
				giftSendChanceAmount: 5, //打赏礼物的剩余次数
				liveType: '', //直播状态
				roomId: this.$route.params.roomid, //房间id
				clickSendBtn: true, //防止两次点击赠送按钮
			}
		},
		mixins: [baseIm],
		computed: {
			giftAmount() {
				return this.$store.state.giftPanel.giftAmount
			},
		},
		created() {
			this.getGiftSendChanceAmount();
			if(this.roomInfo.roomInfo.roomStatus == '0') { //预告
				this.liveType = '1'
			} else if(this.roomInfo.roomInfo.roomStatus == '1') { //直播
				this.liveType = '2'
			} else if(this.roomInfo.roomInfo.roomStatus == '2') { //关播 
				this.liveType = '16'
			};
		},
		methods: {
			getGiftSendChanceAmount() { // 获取礼物剩余次数
				let params = {
					'roomId': this.roomInfo.roomInfo.roomId
				};
				this.$http.get("/zb/live/getGift", {
						params: params
					}).then(res => {
						if(res.data.code == "000000") {
							if(res.data.data.gifts.length) {
								this.giftBanner = [] //清空送礼列表
								let giftList = res.data.data
								this.selectedGiftId = giftList.gifts[0].id //默认第一个礼物为选中状态
								this.giftSendChanceAmount = giftList.ltimes
								let gifts = giftList.gifts
								let giftsLength = gifts.length
								let num = parseFloat(giftsLength / 8)
								let a = Math.floor(num); //商
								let b = parseInt(giftsLength % 8); //余数
								if(b) {
									a = a + 1
								}

								for(let i = 0; i < a; i++) {
									this.giftBanner.push(gifts.splice(0, 8))

								}
							} else {
								console.log("没有礼物数据")
							}
						} else {
							console.log('获取礼物列表和次数数据错误');
						}
					}),
					err => {
						console.log('获取礼物剩余赠送次数失败', err);
					}
			},
			// 选中礼物
			selectGiftHandle(id) {
				this.selectedGiftId = id
				this.$store.dispatch("giftAmount", 1)
			},
			// 减少礼物数量
			giftAmountDecrease() {
				if(this.giftAmount > 1) {
					this.$store.dispatch("giftAmountReduce") //数量减一
				} else {
					// fun.ykDisposeFun("为0");
				}
			},
			// 增加礼物数量
			giftAmountIncrease() {
				if(this.giftAmount < 5) {
					this.$store.dispatch("giftAmountAdd")
				} else {
					fun.toastMessage("您只有5个打赏额度");
				}
			},
			sendGiftHandle() {
				// 神策打点（送礼）
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `直播${['预告', '详情'][roomStatus]}页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: roomId,
					live_room_name: title,
					live_room_status: ['预告', '直播中'][roomStatus],
					live_room_creator: anchor,
					function_name: '送礼',
				});
				// 进入直播间间30秒后才可打赏免费礼物
				let current = new Date().getTime();
				const GIFT__REQUEST__SECOND__TIME = 30; // 送礼时间要求 30秒
				if(current - this.enterRoomTime < GIFT__REQUEST__SECOND__TIME * 1000) {
					fun.toastMessage(`观看直播时间需要超过${GIFT__REQUEST__SECOND__TIME}秒后才能送礼物`);
					return;
				};
				if(this.giftSendChanceAmount <= 0) {
					fun.toastMessage("5个打赏额度已用完");
					return;
				};
				// 关闭送礼物操作面板
				this.$store.dispatch("showGiftPanelFlag", false)
				this.$store.dispatch("showSendMask", false)

				let list = [] //所有礼物
				this.giftBanner.map((v, i) => {
					list.push(...v)
				})
				if(this.roomId=="4335"||this.roomId=="4336"||this.roomId=="4350"||this.roomId=="4351"||this.roomId=="4353"||this.roomId=="4369"||this.roomId=="1623"||this.roomId=="4512"||this.roomId=="4513"||this.roomId=="4515"||this.roomId=="4516"||this.roomId=="4517") { //民生银行固定直播间固定昵称
					this.giftSendUserTx = msyhUnify;
					this.giftSendUserNickName = '顶顶'; // // 赠送礼物的用户昵称，两个角色：其他观众和当前自身用户
				} else {
					this.giftSendUserTx = this.$store.state.userInfo.wxpic || require('../../assets/images/gd_mr.png'); // 赠送礼物的用户头像，两个角色：其他观众和当前自身用户
					this.giftSendUserNickName = this.$store.state.userInfo.nickname || '游客'; // // 赠送礼物的用户昵称，两个角色：其他观众和当前自身用户
				}				
				let selectedGifts = list.find(n => n.id == this.selectedGiftId) //此次赠送的礼物 的详情
				let giftSendName = selectedGifts.name; // 此次赠送的礼物名称
				let giftSendIcon = selectedGifts.imageUrl; // 此次赠送的礼物名称
				let giftSendAmount = this.giftAmount; // 此次赠送的礼物数量
				let giftSendId = selectedGifts.id // 此次赠送的礼物Id
				let selectSendPrice = selectedGifts.price //此次赠送的礼物单价
				let sendGiftMsg = {
					showSendGiftFlag: true,
					giftSendUserTx: this.giftSendUserTx,
					giftSendUserNickName: this.giftSendUserNickName,
					giftSendName: giftSendName,
					giftSendId: giftSendId,
					giftSendIcon: giftSendIcon,
					giftSendAmount: giftSendAmount,
				};
				let _this = this;
				let params = {
					'lts': 70, // 观看直播时间，秒
					'num': _this.giftAmount,
					"giftId": giftSendId,
					'roomId': _this.roomInfo.roomInfo.roomId,
					'anchor': _this.roomInfo.roomInfo.anchor
				};
				if(_this.clickSendBtn) {
					_this.clickSendBtn = false
					_this.$http.get("/zb/live/sendGift", {
							params: params
						}).then(res => {
							_this.clickSendBtn = true
							if(res.data.code === '000000') {
								_this.giftSendChanceAmount = 5 - _this.giftAmount;
								let giftMessageQueue = _this.$store.state.giftMessageQueue
								let giftMessageQueueNew = giftMessageQueue.splice(1, 0, sendGiftMsg); // 插入到第二条，第一条有可能正在播放效果
								_this.$store.dispatch("giftMessageQueue", giftMessageQueue);
								//消息入库
								//_this.sendDataGift(sendGiftMsg)
								// 神策打点（送礼成功）
								const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
								$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
									page_name: `直播${['预告', '详情'][roomStatus]}页`,
									user_nickname: this.$store.state.userInfo.nickname,
									live_room_id: roomId,
									live_room_name: title,
									live_room_status: ['预告', '直播中'][roomStatus],
									live_room_creator: anchor,
									function_name: '送礼成功',
								});
							} else {
								let msg = res.data.msg;
								fun.toastMessage(msg);
								console.log("送礼物条件不符合");
							}
							_this.$store.dispatch("giftAmount", 1)
							_this.selectedGiftIndex = 0;
						}),
						err => {
							console.log('sendGift request err', err);
						}
				} else {
					console.log("频繁点击");
				}
			},
			sendDataGift(msg) { //送礼物消息入库
				let tmpMsg = '赠送了' + msg.giftSendName + 'x' + msg.giftSendAmount;
				let params = {
					'type': '7',
					'liveType': this.liveType,
					'anchor': this.roomInfo.roomInfo.anchor,
					'message': tmpMsg,
					'plat': fun.getPlatform(),
					'sceneId': this.roomInfo.roomInfo.sid,
					'roomId': this.roomId
				};
				this.$http.post("/h5live/speakSend", this.$qs.stringify(params)).then(
					res => {
						if(res.data.code == "000000") {}
					},
					err => {
						console.log(err);
					}
				);
			},
		},

	};
</script>
<style scoped>
	.gift-panel-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750px;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 150;
		border-top: 1px solid #e7e7e7;
	}
	
	.gift-line-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-top: 20px;
	}
	
	.gift-item-wrap {
		box-sizing: border-box;
		width: 187px;
		height: 190px;
		/* height: 210px; */
		padding-top: 20px;
		border: 4px solid transparent;
		border-radius: 14px;
	}
	
	.gift-item-icon {
		width: 96px;
		height: 96px;
		margin: 0 auto;
	}
	
	.gift-item-icon img {
		display: block;
		width: 96px;
		height: 96px;
	}
	
	.gift-item-txt {
		margin-top: 12px;
		font-size: 24px;
		text-align: center;
	}
	
	.gift-number-wrap {
		margin: 20px 0;
		padding-left: 20px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.amount-txt {
		width: 80px;
		font-size: 28px;
	}
	
	.amount-decrease-btn {
		width: 28px;
		height: 28px;
		background-color: #f3f3f3;
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.decrease-icon {
		width: 20px;
		height: 0;
		border-top: 2px solid #fff;
		border-bottom: 2px solid #fff;
	}
	
	.amount-num-input {
		margin-left: 20px;
		width: 40px;
		height: 40px;
		font-size: 26px;
		background-color: #fff;
		color: #333;
	}
	
	.amount-num-input[disabled] {
		color: #333;
		opacity: 1;
	}
	
	.amount-increase-btn {
		position: relative;
		width: 28px;
		height: 28px;
		box-sizing: border-box;
		background-color: #CC3538;
		border-radius: 14px;
	}
	
	.increase-row {
		width: 20px;
		height: 0;
		border-top: 2px solid #fff;
		border-bottom: 2px solid #fff;
		position: absolute;
		top: 50%;
		transform: translateY(-2px);
		left: 4px;
	}
	
	.increase-column {
		width: 0;
		height: 20px;
		border-left: 2px solid #fff;
		border-right: 2px solid #fff;
		position: absolute;
		left: 50%;
		transform: translateX(-2px);
		top: 4px;
	}
	
	.send-btn-wrap {
		margin-left: 38px;
		font-size: 26px;
		width: 120px;
		height: 50px;
		background-color: #CC3538;
		border-radius: 8px;
		line-height: 50px;
		text-align: center;
		color: #fff;
	}
	
	.gift-send-chance-amount {
		min-width: 270px;
		font-size: 26px;
		color: #999;
		margin-right: 20px;
	}
</style>